<template>
  <div class="usermanagement-page">

    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    </el-breadcrumb>

    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="组织架构" name="first">
        <organizationPage :table-data="baseData"></organizationPage>
      </el-tab-pane>
      <el-tab-pane label="用户" name="second">
        <userPage v-if="secondShow"></userPage>
      </el-tab-pane>
      <el-tab-pane label="角色" name="three">
        <rolePage v-if="threeShow"></rolePage>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import organizationPage from './subPage/organizationPage'
  import userPage from './subPage/userPage'
  import rolePage from './subPage/rolePage'

  import {userQuery, roleQuery} from '@/server/userManagement'


  export default {
    components: {
      organizationPage, userPage, rolePage
    },
    data() {
      return {
        activeName: 'first',
        secondShow: false,
        threeShow: false,
        baseData: [],
        userData: [],
        roleData: []
      };
    },
    methods: {
      UserQueryFn() {
        userQuery().then((res) => {

          if (res.code) {
           let sData = res.data.datas;
           this.userData = sData;
          } else {
           this.$message.error(res.message);
          }

        })
      },
      roleQueryFn() {
        roleQuery().then((res) => {
          try {
            if (res.code) {
             let sData = res.data.datas;
             this.roleData = sData;
            } else {
             this.$message.error(res.message);
            }
          } catch (e) {
             this.$message.error('服务器请求异常');
          }

        })
      },
      handleClick(tab, event) {
        // console.log(tab, event);
        if (tab.name == 'second') {
          // this.UserQueryFn();
          this.secondShow = true;
        } else if(tab.name == 'three') {
          // this.roleQueryFn();
          this.threeShow = true;
        }else{
          this.secondShow = false;
          this.threeShow = false;
        }
      }
    }
  };
</script>

<style lang="sass">
  .usermanagement-page
    padding: 20px
    .el-tabs__header
      margin-bottom: 0
    .el-tab-pane
      padding: 20px
      border: 1px solid #e6ebf5
      border-top: none
      box-sizing: border-box
      border-radius: 0 0 4px 4px

</style>
